import React,{ Component } from 'react';
import { connect } from 'react-redux';
import { completeTodo } from '../../action';

import './todo.css'
const mapStateToProps = (todos = []) => {
	return {todos};
};

const mapDispatchToProps = (dispatch) => {
	return {
		onComplete: (item) => {
			dispatch(completeTodo(item));
		}
	}
}

@connect(mapStateToProps, mapDispatchToProps)

export default class TodoList extends Component {
	toggleItem(e){
		let id = parseInt(e.target.getAttribute('data-id'),0)
		this.props.onComplete(id)
	}
	render(){
		const list = this.props.todos;
		return (
			<ul>
				{
					list.map((value,index)=>{
						return <li onClick={this.toggleItem.bind(this)} className={value.completed? 'done' : ''} data-id={value.id} key={index}>{value.text}</li>
					})
				}
			</ul>
		)
	}
}
